<template>
    <div class="sure-plan">
        <a-modal width="1100px" :visible="visible" title="计划确认" @cancel="closeModal" class="yuan-modal sure-plan-modal"
            :dialog-style="{ top: '20px' }">
            <div class="top-panel">
                <div class="top-list">
                    <span class="top-title">生产计划：</span>
                    <span class="top-info">{{sureInfo.planSerial}}</span>
                </div>
                <div class="top-list">
                    <span class="top-title">品种名称：</span>
                    <span class="top-info">{{sureInfo.materialName}}</span>
                </div>
                <div class="top-list">
                    <span class="top-title">分解计划数量：</span>
                    <span class="top-info">{{sureInfo.processPlanDetailList?sureInfo.processPlanDetailList.length:0}}</span>
                </div>
            </div>
            <div class="table">
                <a-table bordered :rowKey="(row)=>row.name+row.planSerial" :data-source="sureInfo.processPlanDetailList"
                    :columns="coulums" :pagination="false">
                </a-table>
            </div>

            <template slot="footer">
                <a-button @click="modalOk" type="primary" :loading="saveLoading">
                    确认保存
                </a-button>
                <a-button @click="closeModal">
                    取消
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import warningApi from "@/api/warningApi";
import { toDecimalNoZero } from "@/utils";
import { h } from "vue";
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
@Component({
    name: "Add",
})
export default class extends Vue {
    @Prop({ default: {} }) sureInfo!: any;
    @Prop({ default: false }) visible!: boolean;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            console.info(this.sureInfo)
        }
    }
    saveLoading = false;

    async mounted() {
        //this.resetForm();
    }
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.saveLoading = true;
        try {
            const res = await warningApi.planAdd(this.sureInfo);
            this.$message.success(res.msg);
            this.closeModal();
            this.$emit("sureClose");
        } finally {
            this.saveLoading = false;
        }
    }

    coulums = [
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "计划名称",
        },
        {
            align: "center",
            dataIndex: "planSerial",
            key: "planSerial",
            title: "计划编号",
        },
        // {
        //     align: "center",
        //     dataIndex: "inputNum",
        //     key: "inputNum",
        //     title: "需求量(kg)",
        //     customRender: (text: string, record: any, index: number) => {
        //         return toDecimalNoZero(record.inputNum)
        //     },
        // },
        {
            align: "center",
            dataIndex: "inputNum",
            key: "inputNum",
            title: "预计投料量(kg)",
            customRender: (text: string, record: any, index: number) => {
                return toDecimalNoZero(record.inputNum);
            },
        },
        {
            align: "center",
            dataIndex: "needNum",
            key: "needNum",
            title: "实际投料量(kg)",
            customRender: (text: string, record: any, index: number) => {
                return toDecimalNoZero(Number(record.inputNum)-Number(record.needNum));
            },
        },
        {
            align: "center",
            dataIndex: "prodNum",
            key: "prodNum",
            title: "计划生产量",
            customRender: (text: string, record: any, index: number) => {
                if (record.name === "包装计划") {
                    return toDecimalNoZero(record.prodNum) + "袋";
                } else {
                    return toDecimalNoZero(record.prodNum) + "kg";
                }
            },
        },
    ];
}
</script>
<style lang="scss">
.sure-plan-modal {
    .top-panel {
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
        display: flex;
    }
    .top-list {
        margin-right: 20px;
    }
    .table {
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
        margin-top: 20px;
    }
}
</style>
